import React from "react";
import { Progress } from "./index";
import { Icon } from "../icon";
import {
  withKnobs,
  text,
  boolean,
  color,
  number,
} from "@storybook/addon-knobs";

export default {
  title: "组件/Progress",
  component: Progress,
  decorators: [withKnobs],
};

export const knobsProgress = () => (
  <Progress
    count={number("count", 50, { range: true, min: 0, max: 100, step: 1 })}
    countNumber={boolean("countNumber", true)}
    height={number("height", 8)}
    circle={boolean("circle", false)}
    size={number("size", 100)}
    primary={color("primary", "#FF4785")}
    secondary={color("secondary", "#FFAE00")}
    bottomColor={color("bottomColor", "#DDDDDD")}
    flashColor={color("flashColor", "#FFFFFF")}
    progressText={text("progressText", "")}
  ></Progress>
);

export const circle = () => <Progress count={80} circle={true}></Progress>;

export const progressText = () => (
  <Progress count={11} progressText={"yehuozhili"}></Progress>
);

export const changeColor = () => (
  <Progress
    count={20}
    primary="blue"
    secondary="yellow"
    bottomColor="brown"
  ></Progress>
);

export const withIcon = () => (
  <Progress
    count={11}
    progressText={
      <span>
        <Icon icon="admin"></Icon>
      </span>
    }
  ></Progress>
);